import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import path from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import usePluginImport from "vite-plugin-importer";

// https://vitejs.dev/config/
export default defineConfig({
  // 本地运行配置，及反向代理配置
  server: {
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
    proxy: {
      // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      "/api": {
        target: "http://39.106.135.45:3000", // 通过代理接口访问实际地址。这里是实际访问的地址。vue会通过代理服务器来代理请求
        changeOrigin: true,
        ws: true, // 允许websocket代理
        rewrite: (path) => path.replace(/^\/api/, ""), // 将api替换为空
      },
    },
  },
  build: {
    rollupOptions: {
      external: ["axios"],
    },
  },
  plugins: [
    uni(),
    // 加上下面的配置
    AutoImport({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
      ],
      imports: ["vue", "uni-app", "pinia"],
      dts: "typings/auto-imports.d.ts",
    }),
    Components({
      // dirs 指定组件所在位置，默认为 src/components
      // 可以让我们使用自己定义组件的时候免去 import 的麻烦
      dirs: ["src/components"],
      // 配置需要将哪些后缀类型的文件进行自动按需引入，'vue'为默认值
      // extensions: ['vue'],
      // // 解析组件，这里以 Element Plus 为例
      // // resolvers: [],
      // // 生成components.d.ts
      dts: "components.d.ts",
      // // 遍历子目录
      // deep: true,
    }),
  ],
  transpileDependencies: ["uview-plus"],
  resolve: {
    // 配置别名
    alias: {
      "@": path.resolve(__dirname, "./src"), // 路径别名
    },
  },
  // 在Vite中配置scss并使用
  css: {
    preprocessorOptions: {
      scss: {
        // 两种方式都可以
        additionalData: '@import "@/styles/global.scss";',
        // additionalData: '@use "@/styles/global.scss" as *;'
      },
    },
  },
});
